<template>
  <div class="box">
    <header>
      <van-nav-bar style="width: 100%;background: rgba(250, 250, 250, 0.9)">
        <div slot="left">
        <span class="iconfont icon-zuo" @click="back"></span>
        </div>
        <div slot="title" style="color:#000;">填写订单</div>
      </van-nav-bar>
    </header>
    <div class="content">
        <!-- 没有登陆的时候显示 -->
        <div class="toplogin" id="loginTips" v-if="!login_state">
            <p class="toplogin-text">
                <span>已有账号登录后可同步收货人信息</span>
                <a @click="$router.push('/login')">登录</a>
            </p>
        </div>
        <div class="container">
            <div class="form-info-top">
                <div class="form-group form-group-big">
                    <div class="form-group-left">收货人</div>
                    <label class="form-group-label" style="display:;font-size:15px;text-align:right;">
                        <b>请完善收货地址</b>
                    </label>
                    <div class="form-group-right">
                        <i class="iconfont icon-youjiantou"></i>
                    </div>
                </div>
                <div class="form-group form-group-big">
                    <div class="form-group-left">送达日期</div>
                    <label class="form-group-label" style="display:;font-size:15px;text-align:right;">
                        <b class="songda">请选择送达日期&nbsp;&nbsp; </b>
                    </label>
                    <div class="form-group-right">
                        <i class="iconfont icon-youjiantou"></i>
                    </div>
                </div>
                <div class="borderbd"></div>
            </div>
            <div class="form-group form-group-bdt">
                <label class="form-group-label form-group-label-auto">订购人信息</label>
                <div class="form-group-input">
                    <p class="form-group-input__place text-right">请填写</p>
                </div>
                <div class="form-group-right">
                    <i class="iconfont icon-youjiantou"></i>
                </div>
            </div>
            <div class="form-group form-group-bdt">
                <div class="form-group-head">
                    <label class="form-group-label form-group-label-auto">贺卡留言</label>
                    <div class="form-group-input">
                        <van-switch v-model="checked" size="20px" active-color="#fa7551e5" inactive-color="rgb(180, 186, 191)"/>
                    </div>
                </div>
                <div class="form-group-textarea">
                    <textarea id="cardmsgTextare"
                    placeholder="写上您的祝福语，可附上署名" rows="4" maxlength="200">
                    </textarea>
                </div>
            </div>
            <div class="item">
                <ul class="item-list">
                    <li class="item-list-term" v-for="item of orderlist" :key="item.productid">
                        <div class="item-list-term-pic"><img :src="item.img"></div>
                        <div class="item-list-term-info">
                            <p class="item-list-term-info__pname">[{{item.typename}}]{{item.product_info}}</p>
                            <p class="item-list-term-info__num">x {{item.num}}</p>
                        </div>
                        <div class="item-list-term-price">¥&nbsp;<span data-itemcode="9010966">{{item.price}}</span></div>
                    </li>
                </ul>
            </div>
            <div class="form-group form-group-bdt">
                <label class="form-group-label form-group-label-auto">备注:</label>
                <div class="form-group-input">
                    <input type="text" style="border:none" >
                </div>
            </div>
        </div>
        <van-submit-bar
        :price="totalPrice * 100"
        button-text="提交订单"
        label="应付："
        text-align="left"
        />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapState } from 'vuex'
// import * as types from '@/store/mutation.types'
import { NavBar, Switch, SubmitBar } from 'vant'
import { getOrderData } from '@/api'
Vue.use(NavBar)
Vue.use(Switch)
Vue.use(SubmitBar)
export default {
  data () {
    return {
      checked: true,
      orderlist: []
    }
  },
  mounted () {
    const { orderid } = this.$route.params
    getOrderData({ orderid }).then(res => {
      this.orderlist = res.data.data.orderlist
      // console.log(this.orderlist)
    })
    // console.log(this.login_state)
  },
  methods: {
    back () {
      this.$router.go(-1)
    }
  },
  computed: {
    totalPrice () {
      return this.orderlist.reduce((sum, item) => {
        return item.flag ? sum + item.price * item.num : sum + 0
      }, 0)
    },
    ...mapState({
      login_state: ({ users }) => users.login_state
    })
  }
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.toplogin {
    height:0.4rem;
    background: rgba(255, 240, 236, 1);
    border: 1px solid rgba(255, 115, 76, 0.2);
    line-height: 0.4rem;
    text-align: center;
    font-size: 0.13rem;
    a {
    display: inline-block;
    width: 0.64rem;
    height: 0.24rem;
    line-height: 0.24rem;
    margin-left: 0.06rem;
    background: rgba(255, 240, 236, 1);
    border: 1px solid #ff734c;
    color: #ff734c;
    font-size: 0.15rem;
    border-radius: 0.27rem;
    }
}
.container{
    height: auto;
    background: #E9ECF0;
    box-sizing: border-box;
    padding: 11px 12px 57px;
    font-size: 15px;
    .form-info-top {
        background: rgba(255, 255, 255, 1);
        border-radius: 8px;
        .form-group-big{
            padding: 16px 12px;
            border-radius: 8px;
        }
        .borderbd {
            width: 100%;
            height: 3px;
            background: url(https://img02.hua.com/m/Shopping/20180919/img/m_orderinfo_bd.png);
            background-repeat: repeat-x;
            background-size: contain;
        }
    }
    .form-group-bdt{
        margin-top: 12px;
        border-radius: 8px;
        .form-group-head{
            width: 100%;
            display: flex;
        }
        .form-group-textarea {
            width: 100%;
            margin-top: 12px;
            padding: 16px 12px;
            border-radius: 12px;
            background-color: #fff0ec;
            font-size: 13px;
            textarea {
                width: 100%;
                padding: 0;
                font-size: 13px;
                background-color: #fff0ec;
                box-sizing: border-box;
                border: none;
                outline: none;
                resize: none;
                line-height: 20px;
            }
        }
        .form-group-input{
            p{
                color: #757575;
                font-size: 13px;
            }
        }
    }
    .form-group {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        align-items: center;
        border-top: 1px solid #F7F9FA;
        background: #fff;
        padding: 16px 12px;
        color: #232628;
        font-size: 15px;
        .form-group-left {
            font-size: 15px;
            width: 60px;
            min-width: 60px;
            margin-right: 15px;
            .form-group-label-auto{
                width: auto;
            }
        }
        .form-group-label {
            width: auto;
            flex: 1;
            min-width: 0;
            .songda{
                color: #757575;
                font-size: 13px;
                font-weight: normal;
            }
        }
        .form-group-right {
            width: 16px;
            text-align: right;
            font-size: 12px;
            .iconfont {
                font-size: 12px;
                transition: 0.3s;
            }
        }
    }
    .item {
        margin-top: 12px;
        background: #fff;
        border-radius: 8px;
        .item-list {
            background: #fff;
            padding: 12px 16px;
            border-radius: 8px;
            .item-list-term {
                width: 100%;
                height: 70px;
                font-size: 13px;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                .item-list-term-pic {
                    width: 64px;
                    height: 70px;
                    overflow: hidden;
                    margin-right: 16px;
                    img {
                        width: 100%;
                        vertical-align: middle;
                    }
                }
                .item-list-term-info {
                    flex: 1;
                    min-width: 0;
                    .item-list-term-info__pname {
                        overflow: hidden;
                    }
                    .item-list-term-info__num {
                        margin-top: 10px;
                    }
                }
                .item-list-term-price {
                    width: 5em;
                    text-align: right;
                    font-weight: bold;
                }
            }
        }
        .item-list-term+.item-list-term {
            margin-top: 8px;
        }
    }
}
</style>
